<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* :empty       选择空标签*/
        /* :focus       当前获得焦点的表单元素*/
        /* :enabled     当前有效的表单元素*/
        /* :disabled    当前无效的表单元素*/
        /* :checked     当前勾选的单选按钮或复选框  注意只用于单选按钮和复选框*/
        /* :root        选择根元素 也就是<html>标签*/

        .p1{width: 80px;height:80px;border: 1px solid #000;}

        /* 空格和换行不会被视为空标签 */
        .p1:empty{background: #000;}

        /* 被选中的表单元素 */
        p input:focus{background:red;}

        p input:disabled{border: 1px solid rgba(146, 56, 56, 0.829);}
        p input:enabled{border: 1px solid rgba(39, 216, 201, 0.829);}

        p input:checked+span{color:yellow;}

        :root{font-size: 30px;;}
    </style>
</head>
<body>
    <p class="p1"></p>
    <p class="p1">123</p>
    <p class="p1"> </p>
    <p class="p1"></p>

    <p>
        <input type="text" name="" id="">
        <input disabled type="text" name="" id="">
        <input type="text" name="" id="">
    </p>
    <p>
        <input type="checkbox" name="" id=""><span>1</span>
        <input type="checkbox" name="" id=""><span>2</span>
        <input type="checkbox" name="" id=""><span>3</span>
    </p>
</body>
</html>